<template>
	<view>
		<view class="u-demo-wrap">
			<!-- <view class="u-demo-area">
				<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="listTabs"
				@change="change" :current="current" :is-scroll="isScroll" :offset="offset" ></u-tabs>
			</view> -->
			<view class="u-demo-area" style="width: 94%; text-align: center;margin-left:3%;margin-top: 10px;">
				<u-subsection @change="change" v-if="true" :bold="bold" :active-color="activeColor" :current="current" :mode="mode" :list="listTabs"></u-subsection>
			</view>
			<view class="u-demo-area  u-flex u-row-center orgimg">
				<div ref="test" class="test">
					<img :src="src" alt="">
				</div>
			</view>
			<view class="u-bottom">
				<u-icon name="arrow-left" size="80" color="#1296db" @click="left()" class=" u-flex u-row-center" style="width: 33%; text-align: center;"></u-icon>
				<u-icon :name="name" size="80" color="#1296db" @click="fun()" class=" u-flex u-row-center" style="width: 33%; text-align: center;"></u-icon>
				<u-icon name="arrow-right" size="80" color="#1296db" @click="play()" class=" u-flex u-row-center" style="width: 33%; text-align: center;"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {zoomElement} from '@/common/utils/zoom.js';
	import operate from '@/common/api/operate.js'
	import {getWeaterInfo} from '@/pages/weather/api/api.js'
	export default {
		data() {
			return {
				shape: 'square',
				list:[],
				src: '',//https://cdn.uviewui.com/uview/swiper/1.jpg
				width: '100%',
				height: 'auto',
				n:0,
				
				mode: 'subsection',
				listTabs:[],
				data: [{
					name: '全国雨量预报'
				}, {
					name: '6小时雨量预报'
				}],
				isScroll: false,
				current: 0,
				bold: false,
				offset: [5,-5],
				control: true,
				activeColor: this.$u.color['primary'],
				otimer:null,
				
				name:"play-circle"
			}
		},
		onLoad(options) {
			this.listTabs = this.data;
		},
		mounted(){
			//获取需要缩放的dom元素
			let zoomEl = this.$refs.test;
			zoomElement(zoomEl)
			this.search();
			//页面关闭及返回
			this.$once('hook:beforeDestroy', () => {
				clearInterval(this.otimer);//停止
			});
		},
		methods: {
			fun:function(){
				if(this.name == "play-circle"){
					this.name = "pause-circle";
					//开始时，先调用播放
					this.play();
					//定时调用
					this.otimer = setInterval(this.play,1500)
				}else{
					this.name = "play-circle";
					this.stop();
				}
			},
			play:function(){
			    this.n--;
			    if(this.n < 0 ){
			        this.n = this.list.length - 1;
			    }
				this.loadImage();
			},
			stop:function(){
				//停止播放
			    clearInterval(this.otimer);
			},
			left:function(){
			    this.n++;
			    if(this.n > this.list.length - 1 ){
			        this.n = 0;
			    }
				this.loadImage();
			},
			change:function(e){
				this.current = e;
				this.search();
			},
			loadImage(){
				var item = this.list[this.n];
				var imgs = operate.reqWeatherPath + "/"+this.formatTime.convertToDate(item.TBA_GETDATE).Format('YYYYMMDD')+"/"+item.TBA_FILENAME;
				this.src = imgs;
			},
			search() {
				var data = {
					STIME: new Date(new Date().addDate("d",-1)).Format("YYYY-MM-DD hh:mm:ss"),
					ETIME: new Date(new Date().addDate("d",1)).Format("YYYY-MM-DD hh:mm:ss"),
					TBA_INFOTYPE: this.listTabs[this.current].name//"全国雨量预报"
				}
				var _param = {}
				_param.serviceCode = "WATER_TBA_WEACONTENTNEWSel";
				_param.data = data;
				getWeaterInfo(_param).then(res =>{
					this.list = res.data;
					this.n = 0;
					this.loadImage();
				})
			}
		}
	}
</script>

<style lang="scss">
	.orgimg {
		 width: 100%;
		 height: auto;
	}
	.test{
		transform-origin: 0 0;
	}
	
	.test img{
		width: 100%;
		height: 50%;
		margin-top: 10%
	}
	.u-bottom{
		text-align: center;
		left: 0;
		right: 0;
		position: fixed;
		bottom: 15rpx;
		font-weight: 400;
		color: cornflowerblue;
	}
</style>
